{% extends "user/base-users.html" %}

{% block title_ruler %}{% endblock %}

{% block title_row %}
    {% set title = contest.name %}
    {% include "contest/contest-tabs.html" %}
{% endblock %}

{% block users_media %}
    <style>
        .select2-selection__arrow {
            display: none;
        }

        .select2-selection__rendered {
            cursor: text;
            overflow: initial !important
        }

        .select2-results__option--highlighted {
            background-color: #DEDEDE !important;
        }

        .select2-results__option {
            white-space: nowrap;
        }

        #search-contest, #search-contest + .select2 {
            margin-top: 0.5em;
        }

        #search-contest {
            width: 200px;
            height: 2.3em;
        }
    </style>
{% endblock %}

{% block users_js_media %}
    {% if can_edit %}
        <script type="text/javascript">
            $(function () {
                $('a.disqualify-participation').click(function (e) {
                    e.preventDefault();
                    if (e.ctrlKey || e.metaKey || confirm({{ _('Are you sure you want to disqualify this participation?')|htmltojs }}))
                        $(this).closest('form').submit();
                })
                $('a.un-disqualify-participation').click(function (e) {
                    e.preventDefault();
                    if (e.ctrlKey || e.metaKey || confirm({{ _('Are you sure you want to un-disqualify this participation?')|htmltojs }}))
                        $(this).closest('form').submit();
                })
            });
        </script>
    {% endif %}
    {% if not contest.ended %}
        <script type="text/javascript">
            $(function () {
                window.install_tooltips = function () {
                    $('td.user-name').find('> span:first-child').each(function () {
                        var link = $(this);
                        link.mouseenter(function (e) {
                            var start_time = link.siblings('.start-time').text().trim();
                            link.addClass('tooltipped tooltipped-e').attr('aria-label', start_time);
                        }).mouseleave(function (e) {
                            link.removeClass('tooltipped tooltipped-e').removeAttr('aria-label');
                        });
                    });
                };

                install_tooltips();
            });
        </script>
    {% endif %}
    <script type="text/javascript">
        $(function () {
            var url = '{{ url('contest_participation', contest.key, '__username__') }}';
            var placeholder = $('#search-contest').replaceWith($('<select>').attr({
                id: 'search-contest'
            })).attr('placeholder');

            $('#search-contest').select2({
                theme: '{{ DMOJ_SELECT2_THEME }}',
                placeholder: placeholder,
                ajax: {
                    url: '{{ url('contest_user_search_select2_ajax', contest.key) }}'
                },
                minimumInputLength: 1,
                templateResult: function (data) {
                    return $('<span>')
                        .append($('<img>', {
                            class: 'user-search-image',
                            src: data.gravatar_url,
                            width: 24,
                            height: 24,
                        }))
                        .append($('<span>', {
                            class: data.display_rank + ' user-search-name',
                        }).text(data.text));
                }
            }).on('change', function () {
                window.location.href = url.replace('__username__', $(this).val());
            });

            $('#show-organizations-checkbox').click(function () {
                $('.organization-column').toggle();
                localStorage.setItem('show-organizations', $('.organization-column').is(':visible') ? 'true' : 'false');
            });
            
            if (localStorage.getItem('show-organizations') == 'true') {
                $('.organization-column').show();
                $('#show-organizations-checkbox').prop('checked', true);
            }
        });
    </script>
    {% include "contest/media-js.html" %}
{% endblock %}

{% block before_users_table %}
    <div style="margin-bottom: 0.5em">
        {% if tab == 'participation' %}
            {% if contest.can_see_full_scoreboard(request.user) %}
                <input id="search-contest" type="text" placeholder="{{ _('View user participation') }}">
            {% endif %}
        {% endif %}
        <input id="show-organizations-checkbox" type="checkbox" style="vertical-align: bottom">
        <label for="show-organizations-checkbox" style="vertical-align: bottom">{{ _('Show organizations') }}</label>
    </div>
{% endblock %}

{% block users_table %}
    {% set table_id='ranking-table' %}
    {% include "contest/ranking-table.html" %}
{% endblock %}
